<template>
	<view>
		<view class=" punch dis" v-if="!type">
			<view v-for="(item,index) in tab" @click="puch(index)" :class="{tb:ico==index}" :key="index">{{item}}</view>
		</view>
		<view v-if="ico== 0">
			<view class="padding30rpx">
				<view class="margin-top25rpx pushl dis" style="margin-bottom: 20rpx;">
					<view class="tecn">
						<view>{{continuityCard || 0}}</view>
						<view>连续打卡次数</view>
					</view>
					<view class="tecn">
						<view>{{clockInYes || 0}}</view>
						<view>打卡总天数</view>
					</view>
					<view class="tecn">
						<view>{{clockInNo || 0}}</view>
						<view>缺卡天数</view>
					</view>
				</view>
				<ren-calendar @monthOther='monthOther' ref='ren' :markDays='markDays' :open="true" :disabledAfter='true'
					@onDayClick='onDayClick'></ren-calendar>
				<view class="text">每个手机号每日只能登录打卡一次</view>
				<u-button v-if='!status' :custom-style="customStyle" :hair-line='false' @click="enter">今日打卡</u-button>
				<u-button :plain="true" :hair-line='true' v-if="status" :custom-style="customStyleNone">
					今日已打卡
				</u-button>
				<!-- <view class="change" v-show="show".>今日已打卡</view> -->
			</view>
			<view class="line"></view>
			<view class="padding30rpx">
				<view class="hui66" style="font-size: 20rpx;">
					打卡规则：
					1.每个手机号每日限登录打卡1次，每日登录打卡可以获得1学习币奖励；连续打卡21
					天，可以或者平台一次性额外奖励10学习币；

				</view>
				<view class="hui66 margin-top25rpx" style="font-size: 20rpx;">
					2.平台会员可进行学习打卡，每个手机号每日可进行多次学习打卡，完成一期课程学即可
					进行当期课程学习打卡，每次学习打卡可获得2学习币奖励。
				</view>
			</view>
		</view>
		<view v-if="ico== 1">
			<view class="header margin-top25rpx">
				<view class="pre" @click="changeMonth('pre')">
					<u-icon name="arrow-left"></u-icon>
				</view>
				<view>{{y+'年'+formatNum(m)+'月'}}</view>
				<view class="next" @click="changeMonth('next')">
					<u-icon name="arrow-right"></u-icon>
				</view>
			</view>
			<view class="padding30rpx">
				<view class="line ">
					<view v-for="(item,index) in studyList" :key="index">
						<view class="u-flex line cardlist">
							<view class="u-flex-1">
								<view class="margin-top25rpx" style="font-weight: bold;">{{item.creationname}}{{item.creationname}}</view>
								<view class="hui99 margin-top25rpx">{{item.creationtime}}</view>
							</view>
							<view class="ke" @click="cancel(item)">
								查看课程
							</view>
						</view>

					</view>
				</view>
			</view>

		</view>
		<u-popup v-model="showHb" mode='center'>
			<!-- <view>出淤泥而不染，濯清涟而不妖</view> -->
			<view class="" style="width: 340px;height: 1100rpx;">
				<canvas style="width: 100%;height: 85%;" canvas-id="test" id="test"></canvas>

				<!-- #ifdef H5 -->
				<view class="mdx-center-sm">
					<u-button :custom-style="customStyle" shape="circle" :hair-line='false' @click="preview">预览图片
					</u-button>
				</view>
				<!-- #endif -->
				<!-- #ifndef H5 -->
				<view class="mdx-center-sm">
					<u-button :custom-style="customStyle" shape="circle" :hair-line='false' @click="save">保存图片
					</u-button>
				</view>
				<!-- #endif -->
			</view>

		</u-popup>
	</view>
</template>

<script>
	import Canvas from "@/common/canvas/canvas";
	import RenCalendar from '@/components/ren-calendar/ren-calendar.vue'
	export default {
		components: {
			RenCalendar
		},
		data() {
			return {
				customStyle: {
					marginTop: '20px', // 注意驼峰命名，并且值必须用引号包括，因为这是对象
					color: '#fff',
					background: '#00A29A'
				},
				customStyleNone: {
					background: '#D5FFFD',
					color: '#00A29A',
					border: '1rpx soild #00A29A'
				},
				status: true,
				showHb: false,
				img1: '',
				img2: '',
				img3: '',
				userInfo: [],
				dataInfo: [],
				//
				curDate: '',
				markDays: [],
				tab: ['登录打卡', '学习打卡'],
				ico: 0,
				y: new Date().getFullYear(), // 年
				m: new Date().getMonth() + 1, // 月
				h: new Date().getDate(),
				List: [{}, {}],
				show: false,
				//未打卡天数
				clockInNo: '',
				//打卡天数
				clockInYes: '',
				//连续打卡
				continuityCard: "",
				studyList: [],
				months: '',
				dakaInfo: [],
				type:0
			}
		},
		onLoad(option) {
			this.type=option.type||0
			var date = new Date();
			this.months = /* date.getFullYear()+'-'+ */ (date.getMonth() < 10 ? '0' + (date.getMonth() + 1) : (date
				.getMonth() + 1));
			this.selectLoginClockIn()
			this.userInfo = this.$store.state['userinfo'];
			this.$http.get('app/UserController/slectOnePoster').then(res => {
				if (res.code == 200) {
					this.dakaInfo = res.data;
					uni.getImageInfo({
						src: res.data.imgurl,
						success: (e) => {
							this.img1 = e.path
						}
					})
					uni.getImageInfo({
						src: res.data.qrcode,
						success: (e) => {
							this.img2 = e.path
						}
					})
					uni.getImageInfo({
						src: this.userInfo.headimg,
						success: (e) => {
							console.log(e);
							this.img3 = e.path
							console.log(this.img1);
						}
					})
				}
			})
		},
		mounted() {
			this.cvs = new Canvas("test", this);
		},
		onReady() {
			let today = this.$refs.ren.getToday().date;
			console.log('today', today)
			this.curDate = today;
			this.markDays.push(today);
		},
		methods: {
			monthOther(e) {
				this.months = e
				this.selectLoginClockIn();
			},
			//获取打卡记录
			selectLoginClockIn() {
				this.$http.get('app/UserController/selectLoginClockIn', {
					months: parseInt(this.months) || ''
				}).then(res => {
					if (res.code == 200) {
						this.clockInNo = res.data.clockInNo
						this.clockInYes = res.data.clockInYes
						this.continuityCard = res.data.continuityCard
						this.$refs.ren.xuanran(res.data)
						this.status = res.data.todayYESNo

					}
				})

			},
			createImg() {
				if(!this.img1){
					this.$mHelper.toast('海报图错误')
					return
				}
				if(!this.img1){
					this.$mHelper.toast('个人头像错误')
					return
				}
				if(!this.img1){
					this.$mHelper.toast('小程序码错误')
					return
				}
				this.cvs
					.div({
						x: 10,
						y: 10,
						height: 450,
						width: 320,
						radius: 5,
						backgroundColor: "#fff",

					})

					.image({
						x: 17,
						y: 20,
						height: 350,
						width: 300,
						radius: 5,
						url: this.img1,
						height: 350,
						width: 305,
					})
					.image({
						x: 17,
						y: 390,
						height: 60,
						width: 60,
						radius: 30,
						url: this.img3
					})
					.text({
						x: 90,
						y: 395,
						fontSize: 15,
						width: 150,
						text: this.userInfo.likename || ''
					})
					.text({
						x: 90,
						y: 415,
						width: 170,
						overflow: "ellipsis",
						lineClamp: 2,
						text: this.dakaInfo.describes || ''
					})
					.image({
						x: 260,
						y: 390,
						height: 60,
						width: 60,
						url: this.img2
					})
					.draw();
				this.showHb = true
			},
			preview() {
				this.cvs.previewImage();
			},
			save() {
				this.cvs.saveImage();
			},
			//查看课程
			cancel(i) {
				uni.navigateTo({
					url: '/pages/term/course/course?id=' + i.id
				})
			},
			formatNum(num) {
				let res = Number(num);
				return res < 10 ? '0' + res : res;
			},
			onDayClick(data) {
				this.curDate = data.date;
				console.log('dsa', data)
			},
			changeMonth(type) {
				if (type == 'pre') {
					if (this.m + 1 == 2) {
						this.m = 12;
						this.y = this.y - 1;
					} else {
						this.m = this.m - 1;
					}
				} else {
					if (this.m + 1 == 13) {
						this.m = 1;
						this.y = this.y + 1;
					} else {
						this.m = this.m + 1;
					}
				}
				this.dates = this.monthDay(this.y, this.m);
				this.getStudyList();
			},
			puch(i) {
				this.ico = i
				if (i == 1) {
					this.getStudyList();
				}
			},
			//
			getStudyList() {
				this.$http.get('app/CurriculumContrller/selectUserP', {
					times: this.y + '-' + this.formatNum(this.m)
				}).then(res => {
					if (res.code == 200) {
						this.studyList = res.data || [];
						uni.hideLoading()
					}
				})
			},
			// 今日打卡
			enter() {
				uni.request({
					method: 'GET',
					url: this.$api + '/app/UserController/addUserClockIn',
					data: {},
					header: {
						'token': uni.getStorageSync('token')
					},
					success: (res) => {
						console.log(res.data)
						if (res.data.code == 200) {
							this.selectLoginClockIn();
							this.createImg();
						} else {
							uni.showToast({
								icon: 'none',
								title: res.data.message
							})
						}
					}
				})
			},
			// 获取当前月份数据
			monthDay(y, month) {
				let dates = [];
				let m = Number(month);
				let firstDayOfMonth = new Date(y, m - 1, 1).getDay(); // 当月第一天星期几
				let lastDateOfMonth = new Date(y, m, 0).getDate(); // 当月最后一天
				let lastDayOfLastMonth = new Date(y, m - 2, 0).getDate(); // 上一月的最后一天
				let weekstart = this.weekstart == 7 ? 0 : this.weekstart;
				let startDay = (() => {
					// 周初有几天是上个月的
					if (firstDayOfMonth == weekstart) {
						return 0;
					} else if (firstDayOfMonth > weekstart) {
						return firstDayOfMonth - weekstart;
					} else {
						return 7 - weekstart + firstDayOfMonth;
					}
				})();
				let endDay = 7 - ((startDay + lastDateOfMonth) % 7); // 结束还有几天是下个月的
				for (let i = 1; i <= startDay; i++) {
					dates.push({
						date: this.formatNum(lastDayOfLastMonth - startDay + i),
						day: weekstart + i - 1 || 7,
						month: m - 1 >= 0 ? this.formatNum(m - 1) : 12,
						year: m - 1 >= 0 ? y : y - 1
					});
				}
				for (let j = 1; j <= lastDateOfMonth; j++) {
					dates.push({
						date: this.formatNum(j),
						day: (j % 7) + firstDayOfMonth - 1 || 7,
						month: this.formatNum(m),
						year: y,
						isCurM: true //是否当前月份
					});
				}
				for (let k = 1; k <= endDay; k++) {
					dates.push({
						date: this.formatNum(k),
						day: (lastDateOfMonth + startDay + weekstart + k - 1) % 7 || 7,
						month: m + 1 <= 11 ? this.formatNum(m + 1) : 0,
						year: m + 1 <= 11 ? y : y + 1
					});
				}
				// console.log(dates);
				return dates;
			},
		}
	}
</script>

<style lang="scss" scoped>
	.cardlist {
		padding-bottom: 20rpx;
		display: flex;
		align-items: center;
	}

	.ke {
		border: 1rpx solid #00A29A;
		height: 60rpx;
		line-height: 60rpx;
		padding: 0 25rpx;
		text-align: center;
		margin-top: 15rpx;
		border-radius: 5rpx;
		margin-left: 20rpx;
		color: #00A29A;
	}

	.header {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 88rpx;
		color: #42464A;
		font-size: 32rpx;
		font-weight: bold;
		border-bottom: 2rpx solid #f2f2f2;

		.pre,
		.next {
			color: #00A29A;
			font-size: 28rpx;
			font-weight: normal;
			padding: 8rpx 15rpx;
			border-radius: 10rpx;
			border: 2rpx solid #dcdfe6;
		}

		.pre {
			margin-right: 30rpx;
		}

		.next {
			margin-left: 30rpx;
		}
	}

	.week {
		display: flex;
		align-items: center;
		height: 80rpx;
		line-height: 80rpx;
		border-bottom: 1rpx solid rgba(255, 255, 255, 0.2);

		view {
			flex: 1;
		}
	}

	.text {
		text-align: center;
		font-size: 20rpx;
		color: #999999;
		margin-top: 100rpx;
		margin-bottom: 20rpx;
	}

	.tecn {
		text-align: center;
		color: #FFFFFF;
		width: 33.3%;
		border-right: 1rpx solid #efefef;
	}

	.tecn:last-child {
		border-right: none;
	}

	.pushl {
		background-color: #00A29A;
		border-radius: 10rpx;
		padding: 25rpx;
	}

	.tb {
		border-bottom: 3rpx solid #00A29A;
		// width: 100rpx;
		background: #00A29A;
		color: #FFFFFF;
		border-radius: 10rpx;
		padding: 10rpx 25rpx;
	}

	.punch {
		padding: 0 20%;
	}

	.change {
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 0 auto;
		height: 100rpx;
		color: #ffffff;
		background-color: #00a29a;
		border-radius: 10rpx;
	}
</style>
